<template>
    <view class="pub_page pub_page_bg pub_redPacket_index pub_header_padding">
        <pub-head headerName="redPacket_index" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box" v-if="wallInfo != ''">
            <!-- <z-paging ref="Zpaging" class="list_div" v-model="list" @query="getList" :refresher-enabled="false" use-chat-record-mode :auto-adjust-position-when-chat="false" :hide-empty-view="true"
                :show-loading-more-no-more-view="false" :fixed="false"> -->
            <z-paging ref="Zpaging" class="content_box" v-model="list" use-chat-record-mode safe-area-inset-bottom
                :hide-empty-view="true" :fixed="false" @query="getList" auto>
                <div class="list_div">
                    <div class="li" v-for="(li,key) in list" :key="key" style="transform: scaleY(-1)">
                        <pub-image class="headimg" :src="li.avatar" :mode="'aspectFill'"></pub-image>
                        <div class="text" @click="toDeal('open_alert',li,key)">
                            <div class="p">恭喜发财，大吉大利</div>
                            <div class="txt">单价: ${{ li.price }} <span class="line"></span> 数量: {{ li.totalNum }}</div>
                        </div>
                    </div>
                </div>
                <template #top>
                    <div class="txt_div">
                        <div class="li">今日区间价格：<span class="num">${{wallInfo.minPrice}} ~ ${{wallInfo.maxPrice}}</span>
                        </div>
                        <div class="line"></div>
                        <div class="li">今日红包总量：<span class="num">{{wallInfo.totalNum}}金币</span></div>
                    </div>
                </template>
                <template #bottom>
                    <div class="foot_div">
                        <div class="log" @click="$comFun.openWin('/pages/redPacket/log')">记录</div>
                        <div class="btn"
                            @click="$comFun.openWin('/pages/redPacket/release',{minPrice:wallInfo.minPrice,maxPrice:wallInfo.maxPrice})">
                            发红包</div>
                    </div>
                </template>
            </z-paging>
        </div>
        <div class="alert_div" v-if="alertData.show">
            <div class="cont_box">
                <div class="li">
                    <div class="txt txt_1">红包单价：</div>
                    <div class="num">${{ alertData.info.price }}</div>
                </div>
                <div class="li">
                    <div class="txt txt_2">数量：</div>
                    <div class="num">{{ alertData.info.totalNum }}</div>
                </div>
                <div class="li">
                    <div class="txt txt_3">总价：</div>
                    <div class="num">${{ alertData.info.payNum }}</div>
                </div>
                <div class="msg">领取红包需支付： <span class="num">{{ alertData.info.totalNum }}+{{showFees}}金币</span></div>
                <div class="msg_1">提示：本次领取红包将消耗1CTT作为燃料</div>
                <div class="li">
                    <div class="txt txt_4">输入二级密码</div>
                    <div class="input">
                        <input type="password" placeholder="请输入密码" v-model="alertData.password" maxlength="6">
                    </div>
                </div>
                <div class="btn" @click="toDeal('sure_receive')">确认领取红包</div>
            </div>
            <div class="close" @click="toDeal('close_alert')"></div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '红包墙',//标题栏内容
                left_type: 3,
            },

            userInfo: '',
            wallInfo: '',
            giveGetPro: 0,

            alertData: {
                show: false,
                key: -1,
                id: '',
                password: '',
                info: ''
            },

            loadFirst: false,
            list: []
        };
    },
    computed: {
        showFees() {
            if (this.alertData.show) {
                return Math.round(Number(this.alertData.info.totalNum) * this.giveGetPro * 100) / 100;
            } else {
                return 0;
            }
        }
    },
    onLoad() {
        this.getInfo();
        this.getConfig();
        // this.getUserInfo();
        // uni.$on("redPacketReload", () => {
        //     this.list = [];
        //     setTimeout(() => {
        //         this.$refs.Zpaging.reload()
        //     }, 1000)
        // })
    },
    onShow() {
        if (this.loadFirst) {
            // this.list = [];
            this.$refs.Zpaging.reload()
        }
    },
    methods: {
        async getUserInfo() {
            const res = await this.$request.get('user/userInfo', {});
            // console.log(res);
            if (res.code == 200) {
                this.userInfo = res.result;
            }
        },
        async getInfo() {
            const res = await this.$request.get('wall/info', {});
            if (res.code == 200) {
                this.wallInfo = res.result;
            }
        },
        async getConfig() {
            const res = await this.$request.get('user/getGivePro', {});
            if (res.code == 200) {
                this.giveGetPro = res.result;
            }
        },
        async getList(pageNo, pageSize) {
            let data = {
                pageNo: pageNo,
                pageSize: pageSize,
            };
            const res = await this.$request.get('wall/getWallList', data);
            this.$comFun.closeLoading();
            // console.log(res);
            this.loadFirst = true;
            if (res.code == 200) {
                this.$refs.Zpaging.complete(res.result.records);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        async toDeal(type, data_1, data_2) {
            switch (type) {
                case 'open_alert':
                    this.alertData = {
                        show: true,
                        key: data_2,
                        id: data_1.id,
                        password: '',
                        info: data_1
                    };
                    break;
                case 'close_alert':
                    this.alertData = this.$options.data().alertData;
                    break;
                case 'sure_receive':
                    if (this.alertData.password.trim() == '') {
                        this.$comFun.toast('请输入支付密码');
                        return;
                    }
                    this.$comFun.openLoading();
                    const res_2 = await this.$request.post('wall/receivePacket', {
                        packetId: this.alertData.id,
                        password: this.alertData.password,
                    });
                    // console.log(res_2);
                    this.$comFun.closeLoading();
                    if (res_2.code == 200) {
                        this.$comFun.toast('领取成功');
                        this.list.splice(this.alertData.key, 1);
                        this.toDeal('close_alert');
                    } else {
                        this.$comFun.toast(res_2.message);
                    }
                    break;
                default:
                    break;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/redPacket.scss";
</style>
